<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>VUE 学习</title>
	</head>

	<body>
		<div id="app">
			<h1> computed 计算属性</h1>
			<div id="app-7">
				<h2>模板中放置过多的逻辑，使得模板的重用性变差</h2>			
				<div id="example">
				  {{ message.split('').reverse().join('') }}
				</div>
				<div>
					<h2>使用计算属性</h2>
					原始字符: --------> <span>{{message}}<br/></span> 
					这里按属性方式使用的reversedMessage，而不是reversedMessage()<br/>					
					反转字符: --------> <span> {{ reversedMessage }}					
				</div>
				<h2>计算属性缓存 vs 方法</h2>
				<p>计算属性是基于它们的依赖进行缓存的,缓存与函数调用实现同样的功能，但是一个缓存的,另一个则不是</p>
				<p>Reversed message: "{{ reversedMsg() }}"</p>
				<p>{{now}}</p>
				
				<h2>计算属性缓存 vs 侦听属性 watch</h2>				
				<div id="demo">{{ fullName }}</div>
			
				<div id="demo">{{ allName = 'Jone done' }}</div>
				
			</div>
		</div>

	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script type="text/javascript">
		
		var app7 = new Vue({
			el: '#app-7',
			computed:{
				// 计算属性的 getter
			    reversedMessage: function () {
			      		// `this` 指向 vm 实例
			      		return this.message.split('').reverse().join('');
			     },
		    	now: function () {
					//这里并不没有依赖数据，所以now的计算属性将不会更新 
					//我们可以在控制台修改app7.message="heloo"
					//reverseMessage的值会变，但是这里不会重新计算
					//相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。					
					return Date.now()
				},
		    	fullName: function () {
		    		//这里的计算属性，比watch更加方便
			      return this.firstName + ' ' + this.lastName
			    },
		    	allName:{
		    		//计算属性默认只有getter方法，有时也需要setter方法，我们增加setter方法
		    		get:function(){
		    			return this.firstName + ' ' + this.lastName;
		    		},
		    		set:function(newvalue){
		    			var names =  newvalue.split(' ');
		    			this.firstName = names[0];
		    			this.lastName = names[names.length - 1];
		    		}
		    	}
			},
			watch: {
					//写这个方法主要是为了与侦听属性fullName对比方便性
			    firstName: function (val) {
			      this.fullName = val + ' ' + this.lastName
			    },
			    lastName: function (val) {
			      this.fullName = this.firstName + ' ' + val
			    }
			  },
			methods:{
				reversedMsg: function(){
					return this.message.split('').reverse().join('');
				}				
			},
			data: {
				firstName: 'Foo',
			    lastName: 'Bar',
			    fullName: 'Foo Bar',
				url:"www.baidu.com",
				a:2,
				ok:true,
				value:1,
				message:"字符反转",
				rawHtml:"<span style=color:red>这个值是红色</span>"
			},
		});
		//在html中直接写 {{allName}},这里的值就会显示在页面上
		app7.allName = "kalce kub";
		
	</script>

</html>